<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="140px" @submit.native.prevent  class="content">
     <el-form-item label="投诉领域" prop="type">
       <el-radio-group v-model="pram.type">
         <el-radio :label="1">工程领域</el-radio>
         <el-radio :label="2">非工程领域</el-radio>
       </el-radio-group>
     </el-form-item>
      <el-row align="middle" :gutter="24" class="ivu-mt mt20">
        <el-col :span="12">
          <el-form-item label="反映人姓名" prop="reflectorName" >
            <el-input type="text"  v-model="pram.reflectorName" placeholder="反映人姓名" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="反映人电话" prop="reflectorMobile">
            <el-input type="text" v-model="pram.reflectorMobile" placeholder="反映人电话" maxlength="11"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="middle" :gutter="24" class="ivu-mt mt20">
        <el-col :span="12">
          <el-form-item label="身份证正面" prop="idCardFront">
            <el-tooltip
              class="item"
              effect="dark"
              content="身份证正面"
              placement="top-start"
            >
              <el-upload
                class="upload-demo"
                action
                accept="image/gif,image/jpeg,image/png"
                :before-upload="onBeforeUpload"
                :http-request="handleUploadForm"
                :on-change="imgSaveToUrl"
                :headers="myHeaders"
                :show-file-list="false"
              >

                <img src="/static/idCardFront.png" alt="" style="width:250px;height:150px;" v-if="!this.idCardFront">
              </el-upload>
            </el-tooltip>
            <div v-if="this.idCardFront">
<!--              <el-button-->
<!--                icon="el-icon-close"-->
<!--                class="imgDel"-->
<!--                @click.native="handlerImgDel"-->
<!--              ></el-button>-->
              <img width="100%" :src="this.idCardFront" alt="" class="img-box" style="width:250px;height:150px;">
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证反面" prop="idCardBack">
            <el-tooltip
              class="item"
              effect="dark"
              content="身份证反面"
              placement="top-start"
            >
              <el-upload
                class="upload-demo"
                action
                accept="image/gif,image/jpeg,image/png"
                :before-upload="onBeforeUpload"
                :http-request="handleUploadForm1"
                :on-change="imgSaveToUrl1"
                :headers="myHeaders"
                :show-file-list="false"
              >

                <img src="/static/idCardBack.png" alt="" style="width:250px;height:150px;" v-if="!this.idCardBack">
              </el-upload>
            </el-tooltip>
            <div v-if="this.idCardBack">
<!--              <el-button-->
<!--                icon="el-icon-close"-->
<!--                class="imgDel"-->
<!--                @click.native="handlerImgDel"-->
<!--              ></el-button>-->
              <img width="100%" :src="this.idCardBack" alt="" class="img-box" style="width:250px;height:150px;">
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="middle" :gutter="24" class="ivu-mt mt20">
        <el-col :span="12">
          <el-form-item label="是否签订劳动合同" prop="isContract">
            <el-select v-model="pram.isContract" placeholder="是否签订劳动合同" clearable style="width: 100%">
              <el-option label="是" value="1"/>
              <el-option label="否" value="2"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="拖欠工资项目名称" prop="projectName" v-if="pram.type==1">
            <el-input type="text" v-model="pram.projectName" placeholder="拖欠工资项目名称" maxlength="60"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="middle" :gutter="24" class="ivu-mt mt20">
        <el-col :span="12">
          <el-form-item label="欠薪负责人姓名" prop="salaryName" >
            <el-input type="text"  v-model="pram.salaryName" placeholder="欠薪负责人姓名" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="欠薪负责人电话" prop="salaryMobile">
            <el-input type="text" v-model="pram.salaryMobile" placeholder="欠薪负责人电话" maxlength="11"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="middle" :gutter="24" class="ivu-mt mt20">
        <el-col :span="12">
          <el-form-item label="实际用工所在地" prop="actualLocation" >
            <el-input type="text"  v-model="pram.actualLocation" placeholder="实际用工所在地" maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细地址" prop="address">
            <el-input type="text" v-model="pram.address" placeholder="详细地址" maxlength="50"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="middle" :gutter="24" class="ivu-mt mt20" v-if="pram.type==1">
        <el-col :span="12">
          <el-form-item label="建设单位" prop="unitName" >
            <el-input type="text"  v-model="pram.unitName" placeholder="建设单位" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="施工单位" prop="constructionName">
            <el-input type="text" v-model="pram.constructionName" placeholder="施工单位" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="middle" :gutter="24" class="ivu-mt mt20">
        <el-col :span="12">
          <el-form-item label="用人单位名称" prop="unitName" v-if="pram.type==2">
            <el-input type="text"  v-model="pram.unitName" placeholder="用人单位名称" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="分包单位名称" prop="subpackageName" v-if="pram.type==1">
            <el-input type="text"  v-model="pram.subpackageName" placeholder="分包单位名称" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="欠薪人数(人)" prop="salaryCount">
            <el-input-number v-model="pram.salaryCount"  :min="1" :max="9999"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="middle" :gutter="24" class="ivu-mt mt20">
        <el-col :span="12">
          <el-form-item label="欠薪金额(元)" prop="salaryAmount">
            <el-input-number v-model="pram.salaryAmount"  :min="1" :max="99999999"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="欠薪发生时间" prop="salaryTime">
            <el-date-picker
              v-model="pram.salaryTime"
              type="date"
              placeholder="欠薪发生时间"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="欠薪基本情况摘要" prop="information">
        <el-input type="textarea" v-model="pram.information" placeholder="欠薪基本情况摘要" :autosize="{ minRows: 4}" maxlength="500"></el-input>
      </el-form-item>
      <el-form-item prop="situation" label="是否曾经通过以下途径反映上述情况 (可多选)">
        <el-checkbox-group v-model="pram.situation">
          <el-checkbox v-for="item in list" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item :label="'证据材料('+pram.swiperImage.length +'/5)'" prop="swiperImage">
        <div class="acea-row" v-if="pram.swiperImage">
          <div
            v-for="(item,index) in pram.swiperImage"
            :key="index"
            class="pictrue mb10"
            draggable="true"
            @dragstart="handleDragStart($event, item)"
            @dragover.prevent="handleDragOver($event, item)"
            @dragenter="handleDragEnter($event, item)"
            @dragend="handleDragEnd($event, item)"
          >
            <el-image
              class="photo-el-image"
              :src="item"
              :preview-src-list="pram.swiperImage"
            />
            <i v-if="!isDisabled" class="el-icon-error btndel" @click="handleRemove(index)"/>
          </div>
          <!--            <div v-if="pram.swiperImage.length<6 && !isDisabled" class="upLoadPicBox" @click="modalPicTap('2')">-->
          <div v-if="pram.swiperImage.length<5 && !isDisabled" class="upLoadPicBox">
            <el-tooltip
              class="item"
              effect="dark"
              content="上传图片"
              placement="top-start"
            >
              <el-upload
                class="upload-demo"
                action
                accept="image/gif,image/jpeg,image/png"
                :before-upload="onBeforeUpload"
                :http-request="handleUploadFormSwiper"
                :headers="myHeaders"
                :show-file-list="false"
              >
                <el-button
                  icon="el-icon-plus"
                  class="mr15 definedArea"
                  style="width:120px;height:120px;"
                ></el-button>
              </el-upload>
            </el-tooltip>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')" v-hasPermi="['admin:notice:update','admin:notice:save']">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce/index'
import * as lighthouseApi from '@/api/lighthouseApi.js'
import * as roleApi from '@/api/role.js'
import {Debounce} from '@/utils/validate'
import { addComplaint, addRole, updateRole } from '@/api/lighthouseApi.js'
import {getToken} from "@/utils/auth";
export default {
  // name: "edit"
  components: { Tinymce },
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
  },
  data() {
    return {
      constants:this.$constants,
      myHeaders: { "X-Token": getToken() },
      isDisabled: this.$route.params.isDisabled==='1'?true:false,
      localFile: null,
      idCardFront:null,
      idCardBack:null,
      dialogImageUrl:null,
      pram: {
        id: 0,
        type:1,
        reflectorName:'',
        reflectorMobile:'',
        isContract:null,
        salaryName:'',
        salaryMobile:'',
        actualLocation:'',
        address:'',
        unitName:'',
        salaryCount:1,
        salaryAmount:1,
        salaryTime:'',
        information:'',
        situation:[],
        swiperImage:[],
        idCardFront:'',
        idCardBack:'',
        projectName:'',
        constructionName:'',
        subpackageName:''
      },
      rules: {
        type: [{ required: true, message: '请选择投诉领域', trigger: ['blur', 'change'] }],
        reflectorName: [{ required: true, message: '请填反映人姓名', trigger: ['blur', 'change'] }],
        // idCardFront: [{ required: true, message: '请上传身份证正面', trigger: ['blur', 'change'] }],
        // idCardBack: [{ required: true, message: '请上传身份证反面', trigger: ['blur'] }],
        reflectorMobile: [{ required: true, message: '请填反映人电话', trigger: ['blur'] }],
        isContract: [{ required: true, message: '请选择是否签订劳动合同', trigger: ['blur', 'change'] }],
        salaryName: [{ required: true, message: '请填负责人姓名', trigger: ['blur', 'change'] }],
        salaryMobile: [{ required: true, message: '请填负责人电话', trigger: ['blur'] }],
        actualLocation: [{ required: true, message: '请填实际用工所在地', trigger: ['blur', 'change'] }],
        address: [{ required: true, message: '请填详细地址', trigger: ['blur'] }],
        unitName: [{ required: true, message: '请填用人单位名称', trigger: ['blur', 'change'] }],
        salaryCount: [{ required: true, message: '请填欠薪人数', trigger: ['blur'] }],
        salaryAmount: [{ required: true, message: '请填欠薪金额', trigger: ['blur', 'change'] }],
        salaryTime: [{ required: true, message: '请填欠薪发生时间', trigger: ['blur', 'change'] }],
        information:[{ required: true, message: '请填欠薪基本情况摘要', trigger: ['blur', 'change'] }],
        situation:[{ required: true, message: '是否曾经通过以下途径反映上述情况', trigger: ['blur', 'change'] }],
        swiperImage:[{ required: true, message: '请上传证据材料', trigger: ['blur', 'change'] }],
      },
      list: [{
        id: 1,
        name: '已向劳动保障监察机构举报投诉',
      },
        {
          id: 2,
          name: '已申请劳动争议仲裁'
        }, {
          id: 3,
          name: '已向人民法院提起诉讼'
        }, {
          id: 4,
          name: '其他途径'
        },
        {
          id: 5,
          name: '未曾经通过以上途径反映过欠薪问题'
        }
      ],
    }
  },
  mounted() {
    this.initEditData()
  },
  methods: {
    close() {
      this.$emit('hideListDialog')
    },
    initEditData() {
      if (this.isCreate !== 1) return //编辑
      const { exposureTitle, sort, type, exposureContent, id, isHeat } = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.pram.exposureTitle = exposureTitle
      this.pram.sort = sort
      this.pram.type = type
      this.pram.exposureContent = exposureContent
      this.pram.isHeat = isHeat
      this.pram.id = id
    },

    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        if (this.isCreate === 0) {
          this.handlerSave()
        } else {
          this.handlerEdit()
        }
      })
    }),
    //图片上传有关
    onBeforeUpload(file) {
      const isIMAGE = file.type === 'image/jpg'||'image/gif'||'image/png';
      const isLt1M = file.size / 1024 / 1024 < 10;

      if (!isIMAGE) {
        this.$message.error('上传文件只能是jpg、png或gif格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 10MB!');
      }
      return isIMAGE && isLt1M;
    },
    // 身份证正面上传
    handleUploadForm(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      let loading = this.$loading({
        lock: true,
        text: "上传中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      lighthouseApi.fileImageApi(formData).then((res) => {
        //图片上传接口 后期调用
        this.pram.idCardFront = res

        loading.close();
        this.$message.success("上传成功");
      })
        .catch((res) => {
          loading.close();
        });
    },
    handleUploadForm1(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      let loading = this.$loading({
        lock: true,
        text: "上传中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      lighthouseApi.fileImageApi(formData).then((res) => {
        //图片上传接口 后期调用
        this.pram.idCardBack = res

        loading.close();
        this.$message.success("上传成功");
      })
        .catch((res) => {
          loading.close();
        });
    },
    // 选取图片后自动回调，里面可以获取到文件
    imgSaveToUrl(event) {
      // 也可以用file
      this.localFile = event.raw; // 或者 this.localFile=file.raw

      // 转换操作可以不放到这个函数里面，
      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
      let reader = new FileReader();
      reader.readAsDataURL(this.localFile); // 这里也可以直接写参数event.raw

      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.integralLog(reader.result)看一下
      reader.onload = () => {
        //console.integralLog(reader.result)
      };

      /* 另外一种本地预览方法 */

      let URL = window.URL || window.webkitURL;
      this.idCardFront = URL.createObjectURL(event.raw);
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
    },
    imgSaveToUrl1(event) {
      // 也可以用file
      this.localFile = event.raw; // 或者 this.localFile=file.raw

      // 转换操作可以不放到这个函数里面，
      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
      let reader = new FileReader();
      reader.readAsDataURL(this.localFile); // 这里也可以直接写参数event.raw

      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.integralLog(reader.result)看一下
      reader.onload = () => {
        //console.integralLog(reader.result)
      };

      /* 另外一种本地预览方法 */

      let URL = window.URL || window.webkitURL;
      this.idCardBack = URL.createObjectURL(event.raw);
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
    },
    handlerImgDel(){
      this.pram.coverImage = null
      this.dialogImageUrl = null
    },
    //轮播图上传
    handleRemove (i) {
      this.pram.swiperImage.splice(i, 1)
    },
    handleUploadFormSwiper(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      let loading = this.$loading({
        lock: true,
        text: "上传中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      lighthouseApi.fileImageApi(formData).then((res) => {
        //图片上传接口 后期调用
        this.pram.swiperImage.push(res)

        loading.close();
        this.$message.success("上传成功");
      })
        .catch((res) => {
          loading.close();
        });
    },
    handleDragStart (e, item) {
      if(!this.isDisabled) this.dragging = item;
    },
    handleDragEnd (e, item) {
      if(!this.isDisabled) this.dragging = null
    },
    handleDragOver (e) {
      if(!this.isDisabled) e.dataTransfer.dropEffect = 'move'
    },
    handleDragEnter (e, item) {
      if(!this.isDisabled){
        e.dataTransfer.effectAllowed = 'move'
        if (item === this.dragging) {
          return
        }
        const newItems = [...this.pram.swiperImage]
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.pram.swiperImage = newItems;
      }
    },
    handlerSave() {
      lighthouseApi.addComplaint(this.pram).then(data => {
        this.$message.success('发布成功')
        this.$emit('hideListDialog')
      })
    },
    handlerEdit() {
      lighthouseApi.updateRole(this.pram).then(data => {
        this.$message.success('更新成功')
        this.$emit('hideListDialog')
      })
    },
  }
}
</script>

<style scoped lang="scss">
.tips{
  color:#999;
}
.content{
  height: 40%;
  .pictrue{
    width: 120px;
    height: 120px;
    border: 1px dotted rgba(0,0,0,0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    .photo-el-image{
      width: 100%;
      height: 100%;
    }
    img{
      width: 100%;
      height: 100%;
    }
    video{
      width: 100%;
      height: 100%;
    }
  }
  .btndel{
    position: absolute;
    z-index: 1;
    width :20px !important;
    height: 20px !important;
    font-size:20px;
    left: 98px;
    top: 1px;
  }
}
</style>
